<template>
	<view>
		
	
		<view  class="flex flex-direction cont" >
			<view class="flex flex-direction align-center .fs-30" v-if="title!=null" >
				<text class="fs-50"> {{title}}</text>
				
			</view>
			<view  v-if="paper.iaddress!=null">
				<image class="flex flex-direction align-center" src="paper.iaddress"></image>
			</view>
			<view class="text-center" v-if="paper.vaddress!=null">
				<video class="avater" muted="true" auto-pause-if-navigate="true"src="paper.vaddress"></video>
				<!-- <view class="page">
					<video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="disable" src="http://114.55.8.17:8000/static/file/%E4%B8%BE%E9%87%8D%E5%A4%B1%E8%AF%AF%E9%9B%86%E9%94%A6.mp4">
					</video>
				</view> -->

			</view>
			<view class="flex text-center flex-direction" v-if="text!=null">
				{{text}}
			</view>
			<view class="flex flex-direction">商品链接</view>
			<view>
				<text :class="['iconfont',agree[isagree]]" @tap.stop="agree2(paper.id)">{{paper.likenum}}</text>
			</view>
			<view v-if="comments!=null">
				<view >文章评论</view>
				<view  v-if="topcoment!=null">
					<text class="flex flex-direction">置顶评论内容</text>
					 <text :class="['iconfont','icon-17'] "  @tap="handleDetail(topcoment.id)"></text>
					{{topcoment.text}}
					<text :class="['iconfont',agree[isagree]]" @click="agree1(topcoment.id)">{{topcoment.likenum}}</text>
					<text :class="['iconfont','icon-pinglun1']"  @click='commentP(topcoment.id)'></text>
					<text v-if="paperauthor.id==myid" :class="['icon-pinglun1'] "  @tap="downTop(topcoment.id)">取消评论置顶</text>
					<text>----------------------------</text>
				</view>	
				
				
				<view class="flex flex-direction "  v-for="(item,index) in comments" :key="item.id" >
					<view if='item.fid==null'> 
					<view> 
					<view class="fcomment">
						<text :class="['iconfont','icon-17'] " @tap="handleDetail(item.id)"></text>
						{{item.text}}
						<text :class="['iconfont',agree[isagree]]" @tap="agree1(item.id)">{{item.likenum}}</text>
						<text :class="['iconfont','icon-pinglun1'] " @click='commentP(item.id)'></text>
						<text  v-if="paperauthor.id==myid" :class="['icon-zhiding'] "  @click="setTop(item.id)">评论置顶</text>
					</view>
							<view class="flex  margin-right" v-for="(item1,index1) in comments" :key="item1.id"  >
								<view if='item1.fid==item.id'>
									<view class="soncomment">
										 <text :class="['iconfont','icon-17'] "  @tap="handleDetail(item1.id)">用户：</text>
										{{item1.text}}  
										<text :class="['iconfont',agree[isagree]]" @click="agree1(item1.id)">{{item1.likenum}}</text>
										<text :class="['iconfont','icon-pinglun1'] "  @click='commentP(item1.id)'> </text>
										<text v-if="paperauthor.id==myid" :class="['iconfont','/static/avatar17.png'] " @click="setTop(item1.id)">评论置顶</text>
									</view>
								</view>
							</view>
					</view>
					</view>
				</view>
			</view>
			
		</view>	
		<!-- //弹出层 mode可选 top、bottom、left、right、center -->
		<u-popup :show="show" mode="center"  >
			<view>
				<text>请输入评论</text>
				<input v-model="tok"/>
				<button type="primary " @click="comment1()">发表</button>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				paper:1,
				paperId:1,
				agree:['icon-dianzan',"icon-dianzan1"],
				isagree:0,
				title:1,
				text:2,
				comments:[],
				show:true,
				commentid:"c",
				tok:null,
				myid:1,
				topcoment:null,
				paperauthor:1
			}
		},
		methods: {
			agree1(id){
				console.log("点赞")
				uni.request({
					            url: 'http://localhost:1010/comment/agree', 
								method: 'POST',
					            data: {
					                 commentId:id,
					                 userId:1   //登陆后从本地获取
					             },
					              success: (res) => {
									  if( this.isagree==0){
										  this.isagree=1
									  }else{
										   this.isagree=0
									  }
									  location.reload();
					               
					              }
					       })
			},
			agree2(id){
				console.log("点赞")
				uni.request({
					            url: 'http://localhost:1010/article/agree', 
								method: 'POST',
					            data: {
					                 paperId:id,
					                 userId:1   //登陆后从本地获取
					             },
					              success: (res) => {
									  if( this.isagree==0){
										  this.isagree=1
									  }else{
										   this.isagree=0
									  }
									  location.reload();
					               
					              }
					       })
			},
			comment1(){
				console.log("11211")
				console.log(this.commentid)
				this.show = false;
				let comment1 ={
							paper:{
								id:this.paperId
							},
					       fid:this.commentid, //this.comment就是评论的id
					          user:{
									id:1 //登陆后从本地获取
									 },
							text:this.tok
					   }
	
				uni.request({
					            url: 'http://localhost:1010/comment/addcoment', 
								method: 'POST',
					            data: comment1,
					              success: (res) => {
									  console.log("品论文正")
									   console.log(comment1)
									  // location.reload();
									   location.reload();
					               
					              }
					       })
			},
			commentP(item) {
				console.log("11111")
				console.log(item)
					this.show = true;
					this.commentid=item;
					
			},
		handleDetail(idx){
					uni.navigateTo({
						url:'/pages/userinfo/userinfo?idx='+idx
					})
			},
	setTop(id){
		console.log("11111666")
		console.log(id)
		let comm={
			"id":id,
			"user":{
				"id":1   //从本地获取登陆人的
			},
			"paper":{
				"id":this.paperId
			}
		}
		console.log(comm)
		uni.request({
				  url: 'http://localhost:1010/comment/settop', 
									method: 'POST',
						            data: comm,
						              success: (res) => {
										  console.log("设置置顶");
										  console.log(res);
						              }
						       })
							  // 查询出置顶评论
							  uni.request({
							  	            url: 'http://localhost:1010/comment/getTopComment', 
							  				method: 'POST',
							  				data:{
							  					paper:{
							  						id:this.paperId
							  					}
							  				},
							  	              success: (res) => {
							  	              console.log("res.dssssa");
							  				   console.log(res.data.data);
											   this.topcoment=res.data.data;
							  	              }
							  	       })
									    location.reload();
				},
		downTop(id){
			console.log("11111666")
			console.log(id)
			let comm={
				"id":id,
				"user":{
					"id":1   //从本地获取登陆人的
				},
				"paper":{
					"id":this.paperId
				}
			}
			console.log(comm)
			uni.request({
					  url: 'http://localhost:1010/comment/downtop', 
										method: 'POST',
							            data: comm,
							              success: (res) => {
											  console.log("设置非顶");
											  console.log(res);
											  this.topcoment=null
											   location.reload();
							              }
							       })
			
		}
				
		},
		onLoad(options) {
			console.log(options);
			console.log("cc"+options.idx);
			this.paperId=options.idx
			//获取登陆用户id赋值给myid
			uni.request({
				            url: 'http://localhost:1010/article/getPaperById?id='+this.paperId, 
							method: 'GET',
				              success: (res) => {
				                  console.log(res.data);
								  console.log(res.data.data);
								  this.paper=res.data.data;
								  console.log("this.paper")
								  console.log(res.data.data.title)
								  console.log(res.data.data.text)
								  this.title=res.data.data.title;
								  this.text=res.data.data.text;
								this.comments=res.data.data.comments
								this.paperauthor=res.data.data.user;
								console.log("作者");
								 console.log(this.paperauthor);
				              }
				       }),
		// 查询出置顶评论
		uni.request({
			            url: 'http://localhost:1010/comment/getTopComment', 
						method: 'POST',
						data:{
							paper:{
								id:this.paperId
							}
						},
			              success: (res) => {
			              console.log("res.dssssa");
						   console.log(res.data.data);
						   this.topcoment=res.data.data;
			              }
			       })
		}
	}
</script>

<style lang="scss">
	@import 'uview-ui/theme.scss';
	@import '../../colorui/icon.css';
	@import '../../colorui/main.css';
	// .iconfont{
	// 	font-size: 30upx;
	// 	color: #888;
	// }
	page{
		background-color: #f6f6f6;
	}
	.cont{
		// background-color: ghostwhite;
		// background: rgba(0, 0, 0, 0.5);

	}
	.avater{
		width: 300upx;
		height: 300upx;
		border-radius: 30%;
	}
	.fcomment{
		margin-top: 20rpx;
		margin-left: 20upx;
		margin-right: auto;
	}
	.soncomment{
		margin-top: 20rpx;
		margin-left: 80upx;
		margin-right: auto;
	}
	.iconfont{
		font-size: 40upx;
		color: #888;
	}
	.user{
		font-size: 150upx;
		color: #888;
	}
	
	
</style>
